<div class="user-setting">
  <div class="flex-row">
    <div class="password-change">
      <div class="header">修改密码 <i class="fa fa-key"></i></div>
      <form (ngSubmit)="onSubmitPwdReset()" class="form">
        <div class="input-group form-group">
          <label for="password" class="input-group-addon">当前密码：</label>
          <input id="password" type="password" class="form-control"
                 required [(ngModel)]="user.password" name="password">
        </div>
        <div class="input-group form-group">
          <label for="pwdReset" class="input-group-addon">新密码：　</label>
          <input id="pwdReset" type="password" class="form-control"
                 required [(ngModel)]="user.pwdReset" name="pwdReset">
        </div>
        <div class="input-group form-group">
          <label for="pwdRepeat" class="input-group-addon">重复密码：</label>
          <input id="pwdRepeat" type="password" class="form-control"
                 required [(ngModel)]="user.pwdRepeat" name="pwdRepeat">
        </div>
        <div class="submit-button-wrapper">
          <button class="btn btn-default" [disabled]="user.pwdReset!=user.pwdRepeat||!user.password"
                  type="submit">提交
          </button>
        </div>

        <alert [type]="'warning'" [dismissible]="true" *ngIf="showPwdWorn">密码错误，请重试</alert>
        <alert [type]="'success'" [dismissible]="true" *ngIf="showSuccess">修改成功</alert>
        <alert [type]="'warning'" *ngIf="user.pwdReset!=user.pwdRepeat">两次输入密码不一致</alert>

      </form>
    </div>
    <div class="user-info">
      <div class="header">用户信息 <i class="fa fa-cog"></i></div>
      <div class="content">
        <p>绑定邮箱：{{user.email}}</p>
      </div>
    </div>
  </div>
  <div class="flex-row">
    <div class="address-management">
      <div class="header">收货地址管理 <i class="fa fa-bicycle"></i> <a (click)="onNewAddressClick()">添加地址</a></div>
      <table class="table">
        <thead>
        <tr>
          <th class="edit-selected">编辑</th>
          <th>详细地址</th>
          <th>收货人</th>
          <th>收货电话</th>
          <th class="default">默认收货地址</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let address of addressList;let idx=index">
          <td><input type="radio" name="radioGroup" (click)="setSelectedAddressIdx(idx)"
                     [attr.checked]="selectedAddressIdx===idx?true:null"></td>
          <td>{{address.province}} {{address.city}} {{address.district}} {{address.address}}</td>
          <td>{{address.name}}</td>
          <td>{{address.phoneNum}}</td>
          <td (mouseover)="setActiveDefaultAddressIdx(idx)" (mouseleave)="setActiveDefaultAddressIdx(null)">
            <div *ngIf="address.isDefault">默认</div>
            <a class="" *ngIf="!address.isDefault" [hidden]="activeDefaultAddressIdx!=idx"
               (click)="setDefaultAddress(idx)">设为默认</a>
          </td>
          <td><a (click)="removeAddress(idx)">删除</a></td>
        </tr>
        </tbody>
      </table>
      <area-picker [(apModel)]="currAddress"
                   [hidden]="!newAddress&&(selectedAddressIdx===null||selectedAddressIdx===undefined)"
                   (addressSubmit)="onAddressSubmit($event)"></area-picker>
    </div>
  </div>
</div>
